<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { currentMonthDays } from "@/utils/common";
import api from "@/api";
import moment from "moment";
import { ElMessage } from "element-plus";
const route = useRouter();
/**
 * 报告类型选择
 */
const activeIndex = ref(-1);
const currentReportType = ref("");
const switchList = reactive([
  { id: "rb", label: "日报" },
  { id: "zb", label: "周报" },
  { id: "yb", label: "月报" },
]);

/**
 * 日期选择
 */
const selectedDate = ref("");
/**
 * 报告日期选择
 */
const curDateIndex = ref(-1);
const currentDate = ref("");

/**
 * 报告日期列表
 */
let dateList = reactive({
  list: [],
  copyList: [],
});

/**
 * 报告类型选择
 */
function handleSwitch(value, index) {
  activeIndex.value = index;
  currentReportType.value = value.label;
  switch (value.id) {
    case "rb":
      selectedDate.value = "";
      api.report
        .getReportList({
          startDate: moment().subtract(3, "months").format("YYYY-MM-DD"),
          endDate: moment().format("YYYY-MM-DD"),
        })
        .then((res) => {
          if (res.data.length) {
            dateList.list = _.filter(res.data, [
              "reportType",
              "dailyReport",
            ])[0].reports;
            dateList.copyList = _.filter(res.data, [
              "reportType",
              "dailyReport",
            ])[0].reports;
            handleDateSelect(dateList.list[0], 0);
          } else {
            ElMessage.warning("未查询到日报记录");
            dateList.list = [];
          }
        });
      break;
    case "zb":
      api.report
        .getReportList({
          startDate: moment().subtract(6, "months").format("YYYY-MM-DD"),
          endDate: moment().format("YYYY-MM-DD"),
        })
        .then((res) => {
          if (res.data.length) {
            dateList.list = _.filter(res.data, [
              "reportType",
              "weeklyReport",
            ])[0].reports;
            handleDateSelect(dateList.list[0], 0);
          } else {
            ElMessage.warning("未查询到周报记录");
            dateList.list = [];
          }
        });
      break;
    case "yb":
      api.report
        .getReportList({
          startDate: moment().subtract(6, "months").format("YYYY-MM-DD"),
          endDate: moment().format("YYYY-MM-DD"),
        })
        .then((res) => {
          if (res.data.length) {
            dateList.list = _.filter(res.data, [
              "reportType",
              "monthlyReport",
            ])[0].reports;
            handleDateSelect(dateList.list[0], 0);
          } else {
            ElMessage.warning("未查询到月报记录");
            dateList.list = [];
          }
        });
      break;
    default:
      break;
  }
}
/**
 * 报告日期选择
 */
function handleDateSelect(value, index) {
  curDateIndex.value = index;
  currentDate.value = value.reportingTime;
  let pathName = "";
  switch (currentReportType.value) {
    case "日报":
      pathName = "DailyReport";
      break;
    case "周报":
      pathName = "WeekReport";
      break;
    case "月报":
      pathName = "MonthReport";
      break;
  }
  route.push({
    name: pathName,
    params: {
      currentReportType: currentReportType.value,
      currentDate: currentDate.value,
      reportId: value.reportId,
    },
  });
}

/**
 * 获取报告日期列表
 */
function getReportIdList() {
  handleSwitch(switchList[0], 0);
}

function handleDateChange(val) {
  if (val != null) {
    // api.report.getReportList({
    //     satrtDate: val,
    //     endDate: val
    // }).then(res => {
    //     if (res.data.length) {
    //         let dailyList = _.filter(res.data, ['reportType', 'dailyReport'])[0].reports;
    //         if (dailyList.length) {
    //             dateList.list = _.filter(res.data, ['reportType', 'dailyReport'])[0].reports;
    //             handleDateSelect(dateList.list[0], 0);
    //         } else {
    //             ElMessage.warning('该日期没有日报记录');
    //         }
    //     } else {
    //         ElMessage.warning('该日期没有日报记录');
    //     }
    // })
    let data = _.filter(dateList.copyList, ["reportingTime", val]);
    dateList.list = data;
    handleDateSelect(dateList.list[0], 0);
  } else {
    getReportIdList();
  }
}

function disabledDate(time) {
  let str = "";
  let year = time.getFullYear();
  let month =
    time.getMonth() + 1 > 9 ? time.getMonth() + 1 : "0" + (time.getMonth() + 1);
  let day = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
  str = `${year}-${month}-${day}`;
  return _.filter(dateList.copyList, ["reportingTime", str]).length == 0;
  //return time.getTime() > Date.now(); //禁止选择今天以后的时间
  //return time.getTime() < Date.now() - 8.64e7;//禁止选择今天以前的时间
}

onMounted(() => {
  getReportIdList();
});
</script>

<template>
  <div class="reportContainer">
    <div class="reportSideBar">
      <div class="title">
        <img src="@/assets/images/report/titleIcon.png" />
        <span
          v-for="(value, index) in switchList"
          :key="value.id"
          @click="handleSwitch(value, index)"
          :class="index == activeIndex ? 'active' : ''"
        >
          {{ value.label }}<i v-show="index != 2"> / </i>
        </span>
      </div>
      <div class="datePick" v-if="currentReportType == '日报'">
        <span style="padding-left: 20px; padding-right: 5px; font-size: 14px"
          >日期筛选</span
        >
        <el-date-picker
          v-model="selectedDate"
          type="date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          placeholder="日期选择"
          :disabledDate="disabledDate"
          @change="handleDateChange"
        />
      </div>
      <div class="container">
        <ul>
          <li v-for="(value, key) in dateList.list" :key="key">
            <div
              :class="['dateItem', key == curDateIndex ? 'activeDate' : '']"
              @click="handleDateSelect(value, key)"
            >
              <span>{{ value.reportingTime }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.reportContainer {
  display: flex;
}

.reportSideBar {
  position: relative;
  width: 253px;
  height: 100%;

  .title {
    width: 237px;
    height: 40px;
    //margin: 0px auto;
    margin-left: 4px;
    margin-bottom: 5px;
    //padding-left: 20px;
    color: white;
    line-height: 40px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("@/assets/images/report/titleBg.png");

    img {
      width: 16px;
      height: 20px;
      vertical-align: middle;
      padding: 0px 10px 3px 15px;
    }

    span {
      font-weight: 500;
      cursor: pointer;
    }

    i {
      color: white !important;
    }

    .active {
      color: #e7d542;
      font-weight: 700;
    }
  }

  .datePick {
    position: absolute;
    width: 310px;
    top: 5px;
    left: 300%;
  }

  .container {
    margin: 0 auto;
    height: 800px;
    overflow-y: scroll;
    overflow-x: hidden;

    .dateItem {
      width: 226px;
      height: 42px;
      line-height: 42px;
      margin: 0 auto;
      padding-left: 20px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("@/assets/images/report/itemBg0.png");
      cursor: pointer;
    }

    .activeDate {
      color: white;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("@/assets/images/report/itemBg.png");
    }
  }
}

.content {
  width: calc(100% - 253px);
}
</style>
